[VueJS 에러 해결] script 및 style 태그 컴포넌트에서 사용시 에러 해결 방법은?

Last Modified : 2022-02-28 / Created : 2022-02-28

4,979
View Count

주소 복사하기

VueJS의 컴포넌트 내부에 스크립트를 추가하여 사용하려고 할 경우 아래와 같은 에러가 발생하였습니다.

[plugin:vite:vue] Tags with side effect (<script> and <style>) are ignored in client component templates.

결국 script와 style 태그 사용이 컴포넌트 내부에서는 사용 안되는 것 같습니다. 이 경우 어떻게 해결할 수 있을까요?

1. 컴포넌트 내부가 아닌 전역으로 선언하기
; 컴포넌트가 아닌 전역으로 선언하면 위와 같은 에러가 발생하지 않습니다.

2. 라이프싸이클 함수 mounted에서 script 태그를 생성한 후 body 또는 head에 appendChild하기
; mounted에서 script 태그를 생성한 후에 script를 연결하는 방법입니다.

위의 방법을 사용하여 해결이 가능합니다. 방법만 알아보고 자세한 코드는 생략하였습니다.

! [기타] GoogleAds 코드 추가하는 방법

Google Adsense를 사용하는 경우 광고 코드의 태그나 스크립트를 특정 위치에 추가해야 하는 경우가 있습니다. 구글 광고의 경우 자동 광고 생성 방법도 사용되지만 원하는 특정 위치를 선택해 광고를 해야한다면? 그리고 VueJS를 사용하는 경우라면 어떻게 하면 될까요? 좀 더 자세히 알아봅니다.

우선 해결 방법은 아래와 같이 <component is="script" src="...">를 사용하는 방법입니다.

이와 같이 사용할 경우에는 처음 발생했던 에러는 더 이상 발생하지 않습니다. 구글 광고 코드를 살펴보면 ins 및 script 코드가 더 존재합니다. 이를 모두 사용해 간략한 컴포넌트 Ads300을 만들어 보았습니다.

@ Ads300.vue

<template>
<component is="script" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async></component>
<ins class="adsbygoogle" style="max-width: 100%;display: block; width: 300px;height: 250px; margin: 20px auto;" data-ad-client="ca-pub-xxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx"></ins>
</template>

<script>
import {defineComponent, onMounted } from "vue"

export default defineComponent({
name: 'Ad300',
setup() {
onMounted (() => {
(window.adsbygoogle = window.adsbygoogle || []).push({})
})
}
})
</script>

특별한 내용은 없습니다. 참고로 위 코드는 Composition API를 사용한 경우의 컴포넌트 코드입니다. 위와 같이 만든 컴포넌트를 해당 위치에 추가하면 되겠죠~

간단하죠? 여기까지 구글 Adsense를 사용하는 경우의 방법도 간략하게 알아보았습니다.

아래의 글도 찾고 계시지 않나요?

[VueJS] v-slot을 사용하여 컴포넌트에 템플릿 추가하는 방법과 slot exist 확인하기

Vuex store에서 commit, dispatch 메소드를 전역으로 실행하는 방법